import { useHistory } from 'react-router-dom'
import Icon from '../Icon'
import styles from './index.module.scss'
import classNames from 'classnames'
import { ReactElement } from 'react'
// import { withRouter } from 'react-router-dom'
// 1. withRouter的使用
// history match location 这个组件必须通过路由配置的
// 自己渲染的组件 无法获取路由信息 <NavBar>
// 2. 路由提供了几个和路由相关的hook
// useHistory useLocation(用的最多的) useParam
type Props = {
  children: string | ReactElement
  extra?: string | ReactElement
  className?: string
}
function NavBar({ children, extra, className }: Props) {
  const history = useHistory()
  const back = () => {
    // 跳回上一页
    // console.log(history)
    history.go(-1)
  }
  return (
    <div>
      <div className={classNames(styles.root, className)}>
        {/* 后退按钮 */}
        <div className="left">
          <Icon type="icon-fanhui" onClick={back} />
        </div>
        {/* 居中标题 */}
        <div className="title">{children}</div>

        {/* 右侧内容 */}
        <div className="right">{extra}</div>
      </div>
    </div>
  )
}

// export default withRouter(NavBar)
export default NavBar
